import { FC, useEffect, useRef } from 'react';
import { Button, Input, Modal } from 'antd';
import { fetchEditMiner } from '@/service/editMiner';

interface IMinerNameEditModalProps {
  mid: number;
  mac: string;
  nameStr: string;
  visible: boolean;
  setVisible: (flag: boolean) => void;
  afterEdit?: Function;
}

const MinerNameEditModal: FC<IMinerNameEditModalProps> = (props) => {
  const { visible, nameStr, setVisible, mid, mac, afterEdit } = props;

  const InputRef = useRef<any>(null);

  const handleOk = () => {
    fetchEditMiner(mid, mac, InputRef.current.state.value)
      .then((res) => {
        if (res.data.code === 0) {
        }
      })
      .finally(() => {
        afterEdit && afterEdit(mid, mac, InputRef.current.state.value);
        setVisible(false);
      });
  };
  return (
    <Modal
      destroyOnClose={true}
      maskClosable={false}
      title="修改矿工名"
      footer={null}
      visible={visible}
      onCancel={() => setVisible(false)}
    >
      <div>
        <Input ref={InputRef} defaultValue={nameStr} />
      </div>
      <div style={{ marginTop: '25px' }}>
        <Button block type="primary" onClick={() => handleOk()}>
          确定
        </Button>
      </div>
      <div style={{ marginTop: '25px' }}>
        <Button block onClick={() => setVisible(false)}>
          取消
        </Button>
      </div>
    </Modal>
  );
};

export default MinerNameEditModal;
